import 'package:flutter/material.dart';

class WStack extends StatefulWidget {
  @override
  _WStackState createState() => _WStackState();
}

class _WStackState extends State<WStack> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("层叠或定位布局"),
      ),
      body: //通过ConstrainedBox来确保Stack占满屏幕
          ConstrainedBox(
        constraints: BoxConstraints.expand(),
        child:
//        Stack(
//          alignment: Alignment.center, //指定未定位或部分定位widget的对齐方式
//          children: <Widget>[
//            Container(
//              child: Text("测试容器垂直居中", style: TextStyle(color: Colors.white)),
//              color: Colors.red,
//            ),
//            Positioned(
//              top: 40.0,
//              left: 18.0,
//              child: Text("测试top和left"),
//            ),
//            Positioned(
//              top: 18.0,
//              child: Text("测试top"),
//            )
//          ],
//        ),
            Stack(
          alignment: Alignment.center,
          fit: StackFit.expand, //未定位widget占满Stack整个空间
          children: <Widget>[
            //类似于android的FrameLayout在最下面一层
            Positioned(
              left: 18.0,
              child: Text("I am Jack"),
            ),
            //类似于android的FrameLayout在中间一层
            Container(
              child: Align(
                child:
                    Text("Hello world", style: TextStyle(color: Colors.black)),
              ),
              color: Colors.transparent,
            ),
            //类似于android的FrameLayout在最顶层
            //修改Container的color可把I am Jack遮盖
            Positioned(
              top: 18.0,
              child: Text("Your friend"),
            )
          ],
        ),
      ),
    );
  }
}
